<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="基本信息">
				<view slot="center" class="navTitle">
					基本信息 
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="whiteForm">
						<view class="line s2" @tap="selectImage">
							<view class="ll">
								<view class="avan">
									<image :src="form.avantar" mode="aspectFill"></image>
								</view>  
							</view>
							<view class="lr">
								<view class="fs">
									<text>修改头像</text>
									<view class="ico">
										<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="whiteForm">
						<view class="line">
							<view class="ll">
								姓名
							</view>
							<view class="lr">
								{{form.name}}
							</view>
						</view>
						<view class="line">
							<view class="ll">
								性别
							</view>
							<view class="lr">
								{{form.sex}}
							</view>
						</view>
						<view class="line">
							<view class="ll">
								年龄
							</view>
							<view class="lr">
								{{form.age}}岁
							</view>
						</view>
						<view class="line">
							<view class="ll">
								手机号
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.phone" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								邮箱
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.email" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								工作单位
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.workUnit" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								工作地址
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.workAddress" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex0 fbtns">
			<view class="pd30">
				<view class="btn" @tap="submit">
					确认修改
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					id:'',
					avantar:'',
					name:'',
					sex:'',
					age:'',
					phone:'',
					email:'',
					workUnit:'',
					workAddress:''
				}
			}
		},
		methods: {
			selectImage(){
				var that=this;
				uni.chooseImage({
					count:1,
					success(res) {
						const fileurl=res.tempFilePaths[0];
						that.form.avantar=fileurl;
						return;
						uni.uploadFile({
							url:'',
							filePath:fileurl,
							success(res) {
								that.form.avantar=res.data
							}
						})
					}
				})
			},
			submit(){
				
			},
			getInfo(id){
				var that=this;
				var res={
					id:101,
					avantar:'../../../static/upload/parent.png',
					name:'刘大美',
					sex:'女',
					age:38,
					phone:'13423456789',
					email:'123456@qq.com',
					workUnit:'XXXXXXXXXXXXX',
					workAddress:'XXXXXXXXXX'
				};
				that.form=res;
			}
		},
		computed:{
			
		},
		mounted(){
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.whiteForm{
		padding: 0 40rpx;
		background: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.textarea{
			border: none;
			background: #fff;
			font-size: 28rpx;
			color: #65554d;
			outline: none;
			line-height: 1.5;
			padding: 40rpx 0;
		}
		.line{
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			height: 100rpx;
			justify-content: space-between;
			border-bottom: 1rpx solid #f7f5f2;
			font-size: 28rpx;
			&.s2{
				height: 140rpx;
			}
			&:last-child{
				border: none;
			}
			.ll{
				flex: 1 1 auto;
				overflow: hidden;
				padding-right: 30rpx;
				color: #897f7a;
				.avan{
					width: 90rpx;
					height: 90rpx;
					border: 5rpx solid #ffe3c2;
					box-sizing: border-box;
					background: #fff;
					overflow: hidden;
					border-radius: 50%;
					image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
			.lr{
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				color: #af9c91;
				.fs{
					display: flex;
					align-items: center;
				}
				input{
					display: block;
					outline: none;
					border: none;
					background: transparent;
					width: 100%;
					text-align: right;
					font-size: 28rpx;
					color: #65554d;
				}
				.ico{
					flex: 0 0 auto;
					margin-left: 10rpx;
					image{
						display: block;
						width: 12rpx;
						height: 24rpx;
					}
				}
				.cur{
					flex: 0 0 auto;
				}
			}
		}
	}
</style>
